<template>
    <view class="container">
		<cu-custom bgColor="bg-gradual-pink" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content">考勤打卡</block>
		</cu-custom>
        <map-positioning-punch
            :clock-in-area="clockInArea" 
            :refresh-timeout="refreshTimeout"
            @clockInClick="clockIn"
            :is-report="true"
            @change="locationChange"
        >
        </map-positioning-punch>
    </view>
</template>

<script>
    /**
     * 作者：腾辉工作室
     * 邮箱：844475003@qq.com
     */
    export default {
        data() {
            return {
                // 打卡区域设置
                clockInArea: [
                    {
                        longitude: '114.061657',
                        latitude: '22.663991',
                        distance: 250,
                    },
					
					// "latitude": 22.65333,
					// "longitude": 114.066243,
                    // {
                    //     longitude: '114.072781',
                    //     latitude: '22.659057',
                    //     distance: 400,
                    // },
                    // {
                    //     longitude: '114.072781',
                    //     latitude: '22.659057',
                    //     distance: 300,
                    // }
                ],
                // 刷新打卡区域频率
                refreshTimeout: 3000
            }
        },
        methods: {
            // 位置变化
            locationChange({ location, areaLocation, distance }) {
                // uni.showToast({
                //     icon: 'success',
                //     title: '上报成功'
                // })
                // location 当前位置
                // areaLocation 符合打卡的区域
                // distance 打卡距离
                // console.log(11, location, areaLocation, distance)
            },
            // 打卡回调事件
            clockIn({ location, areaLocation, distance }) {
                uni.showToast({
                    icon: 'success',
                    title: '打卡成功'
                })
                // location 当前位置
                // areaLocation 符合打卡的区域
                // distance 打卡距离
                console.log(location, areaLocation, distance)
            }
        }
    }
</script>